// =========================================================================
// ACRYLICWALA ULTIMATE DYNAMIC HOMEPAGE (FLATSOME NATIVE FONTS INHERITED)
// =========================================================================

add_shortcode('acrylicwala_home', 'acrylicwala_dynamic_homepage_shortcode');
function acrylicwala_dynamic_homepage_shortcode() {
    $post_id = get_the_ID(); 
    $html = '';

    // 1. Dependencies & Styles
    $html .= '<script src="https://cdn.tailwindcss.com"></script>';
    $html .= '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">';
    $html .= '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />';
    $html .= '<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>';
    
    // FLATSOME TYPOGRAPHY INHERIT FIX
    $html .= '<script>
        tailwind.config = {
            important: "#aw-home-wrap", 
            theme: {
                extend: {
                    colors: { navy: "#0F172A", orange: "#F97316", lightbg: "#F8FAFC" },
                    fontFamily: { heading: ["inherit"], body: ["inherit"] }
                }
            }
        }
    </script>';

    $html .= '<style>
        #aw-home-wrap { color: #0F172A; background-color: #F8FAFC; }
        #aw-home-wrap h2, #aw-home-wrap h3 { color: #0F172A; margin-bottom: 0; padding: 0; }
        #aw-home-wrap a { text-decoration: none !important; }
        #aw-home-wrap p { margin-bottom: 0; padding: 0; }
        .elementor-custom-hero { height: calc(100vh - 100px); min-height: 500px; width: 100%; }
        @media (max-width: 1024px) {
            .elementor-custom-hero { height: auto; min-height: 80vh; }
            .hero-mobile-image { height: 45vh; min-height: 250px; }
            .hero-mobile-text { height: auto; padding: 3rem 1.5rem; }
        }
        .swiper-pagination-bullet { background: #cbd5e1; opacity: 1; width: 10px; height: 10px; }
        .swiper-pagination-bullet-active { background: #F97316 !important; width: 24px; border-radius: 6px; transition: all 0.3s ease; }
        .premium-card { transition: all 0.3s ease; }
        .premium-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(249, 115, 22, 0.15); border-color: #F97316; }
    </style>';

    $html .= '<div id="aw-home-wrap">';

    // 2. Slider
    $html .= '<div class="swiper myElementorHero elementor-custom-hero relative border-b border-slate-200 bg-lightbg">';
    $html .= '<div class="swiper-wrapper">';

    if ( class_exists('ACF') && have_rows('hero_slider', $post_id) ) {
        while ( have_rows('hero_slider', $post_id) ) {
            the_row();
            $image_array = get_sub_field('slide_image'); 
            $img_url     = is_array($image_array) ? $image_array['url'] : $image_array; 
            $subtitle    = get_sub_field('slide_subtitle');
            $title       = get_sub_field('slide_title');
            $desc        = get_sub_field('slide_description');
            $btn_text    = get_sub_field('button_text');
            $btn_link    = get_sub_field('button_link');

            $html .= '<div class="swiper-slide flex flex-col lg:flex-row w-full h-full bg-lightbg">';
            $html .= '<div class="w-full lg:w-1/2 h-1/2 lg:h-full flex flex-col justify-center items-start p-6 lg:p-16 xl:p-24 hero-mobile-text order-2 lg:order-1">';
            
            if( !empty($subtitle) ) {
                $html .= '<span class="inline-block py-1 px-3 rounded-full bg-orange/10 text-orange font-bold text-xs tracking-widest uppercase mb-4">' . esc_html($subtitle) . '</span>';
            }
            
            $html .= '<h2 class="text-3xl lg:text-5xl xl:text-6xl font-heading font-black text-navy leading-tight mb-4 uppercase tracking-tighter">' . $title . '</h2>';
            
            if( !empty($desc) ) {
                $html .= '<p class="text-slate-600 text-sm lg:text-base mb-8 max-w-md font-body leading-relaxed">' . esc_html($desc) . '</p>';
            }
            
            if( !empty($btn_text) && !empty($btn_link) ) {
                $html .= '<a href="' . esc_url($btn_link) . '" class="inline-block bg-navy text-white font-heading font-bold uppercase text-xs lg:text-sm py-3 lg:py-4 px-8 rounded-lg hover:bg-orange transition-colors duration-300 shadow-xl">' . esc_html($btn_text) . '</a>';
            }
            
            $html .= '</div>';
            $html .= '<div class="w-full lg:w-1/2 h-1/2 lg:h-full relative hero-mobile-image order-1 lg:order-2">';
            
            if( !empty($img_url) ) {
                $html .= '<img src="' . esc_url($img_url) . '" class="absolute inset-0 w-full h-full object-cover">';
            }
            
            $html .= '</div></div>';
        }
    } else {
        $shop_link = function_exists('wc_get_page_permalink') ? esc_url(wc_get_page_permalink('shop')) : '#';
        $html .= '
        <div class="swiper-slide flex flex-col lg:flex-row w-full h-full bg-lightbg">
            <div class="w-full lg:w-1/2 h-1/2 lg:h-full flex flex-col justify-center items-start p-6 lg:p-16 xl:p-24 hero-mobile-text order-2 lg:order-1">
                <span class="inline-block py-1 px-3 rounded-full bg-orange/10 text-orange font-bold text-xs tracking-widest uppercase mb-4">Premium Quality</span>
                <h2 class="text-3xl lg:text-5xl xl:text-6xl font-heading font-black text-navy leading-tight mb-4 uppercase tracking-tighter">Custom <span class="text-orange">Acrylic</span> Prints</h2>
                <p class="text-slate-600 text-sm lg:text-base mb-8 max-w-md font-body leading-relaxed">Turn your favorite memories into stunning wall art. Crystal clear, shatterproof, and ready to hang.</p>
                <a href="' . $shop_link . '" class="inline-block bg-navy text-white font-heading font-bold uppercase text-xs lg:text-sm py-3 lg:py-4 px-8 rounded-lg hover:bg-orange transition-colors duration-300 shadow-xl">Customize Now</a>
            </div>
            <div class="w-full lg:w-1/2 h-1/2 lg:h-full relative hero-mobile-image order-1 lg:order-2">
                <img src="https://images.unsplash.com/photo-1513519245088-0e12902e5a38?q=80&w=2070&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover">
            </div>
        </div>';
    }
    
    $html .= '</div><div class="swiper-pagination mb-4"></div></div>';

    // 3. Categories
    $html .= '
    <section class="py-16 bg-white border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="text-center mb-10">
                <h2 class="text-3xl md:text-4xl font-heading font-black text-navy uppercase tracking-tight">Shop By Category</h2>
                <div class="w-16 h-1 bg-orange mx-auto mt-4 rounded-full"></div>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">';
    
    if ( function_exists('WC') ) {
        $prod_cats = get_terms(array('taxonomy' => 'product_cat', 'hide_empty' => false, 'number' => 4, 'parent' => 0));
        if ( !empty($prod_cats) && !is_wp_error($prod_cats) ) {
            foreach ( $prod_cats as $cat ) {
                $thumbnail_id = get_term_meta($cat->term_id, 'thumbnail_id', true);
                $image_url = wp_get_attachment_url($thumbnail_id);
                if ( !$image_url ) { $image_url = wc_placeholder_img_src(); }
                
                $html .= '
                <a href="' . esc_url(get_term_link($cat)) . '" class="premium-card bg-lightbg border border-slate-200 rounded-2xl p-4 flex flex-col items-center text-center group">
                    <img src="' . esc_url($image_url) . '" alt="' . esc_attr($cat->name) . '" class="w-full aspect-square object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-500">
                    <h3 class="font-heading font-bold text-navy text-sm md:text-base leading-tight">' . esc_html($cat->name) . '</h3>
                </a>';
            }
        }
    }
    
    $html .= '</div></div></section>';

    // 4. Trending Products
    $html .= '
    <section class="py-16 bg-lightbg border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="text-center mb-10">
                <h2 class="text-3xl md:text-4xl font-heading font-black text-navy uppercase tracking-tight">Trending Products</h2>
                <div class="w-16 h-1 bg-orange mx-auto mt-4 rounded-full"></div>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 mb-10">';
    
    if ( function_exists('WC') ) {
        $args = array('post_type' => 'product', 'posts_per_page' => 4, 'post_status' => 'publish');
        $loop = new WP_Query($args);
        
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) {
                $loop->the_post();
                $_product = wc_get_product( get_the_ID() );
                if( $_product ) {
                    $img_url = wp_get_attachment_image_url($_product->get_image_id(), 'large');
                    if ( !$img_url ) { $img_url = wc_placeholder_img_src(); }
                    
                    $html .= '
                    <div class="premium-card bg-white border border-slate-200 rounded-2xl p-3 flex flex-col text-center">
                        <a href="' . esc_url(get_permalink()) . '" class="block mb-4 overflow-hidden rounded-xl">
                            <img src="' . esc_url($img_url) . '" alt="' . esc_attr(get_the_title()) . '" class="w-full aspect-square object-cover hover:scale-105 transition-transform duration-500">
                        </a>
                        <a href="' . esc_url(get_permalink()) . '" class="font-heading font-bold text-navy text-sm md:text-[15px] leading-tight mb-2 h-10 overflow-hidden line-clamp-2">' . get_the_title() . '</a>
                        <div class="text-orange font-black text-lg mb-4">' . $_product->get_price_html() . '</div>
                        <a href="' . esc_url(get_permalink()) . '" class="mt-auto block w-full bg-navy text-white font-heading font-bold uppercase text-xs py-3 rounded-lg hover:bg-orange transition-colors">Customize It</a>
                    </div>';
                }
            }
            wp_reset_postdata();
        }
    }
    
    $shop_link = function_exists('wc_get_page_permalink') ? esc_url(wc_get_page_permalink('shop')) : '#';
    $html .= '
            </div>
            <div class="text-center">
                <a href="' . $shop_link . '" class="inline-block border-2 border-navy text-navy font-heading font-bold uppercase text-sm py-3 px-10 rounded-full hover:bg-navy hover:text-white transition-colors duration-300">View All Products</a>
            </div>
        </div>
    </section>';

    // 5. How It Works
    $html .= '
    <section class="py-16 bg-navy text-white relative overflow-hidden" style="background-color: #0F172A !important;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-heading font-black uppercase tracking-tight text-white !important" style="color: white !important;">How It Works</h2>
                <div class="w-16 h-1 bg-orange mx-auto mt-4 rounded-full"></div>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div><div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center mb-4 text-2xl text-orange"><i class="fa-solid fa-cloud-arrow-up"></i></div><h3 class="font-heading font-bold text-lg mb-2 text-white !important" style="color: white !important;">1. Upload Image</h3></div>
                <div><div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center mb-4 text-2xl text-orange"><i class="fa-solid fa-border-all"></i></div><h3 class="font-heading font-bold text-lg mb-2 text-white !important" style="color: white !important;">2. Choose Size</h3></div>
                <div><div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center mb-4 text-2xl text-orange"><i class="fa-solid fa-wand-magic-sparkles"></i></div><h3 class="font-heading font-bold text-lg mb-2 text-white !important" style="color: white !important;">3. Customize</h3></div>
                <div><div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center mb-4 text-2xl text-orange"><i class="fa-solid fa-truck-fast"></i></div><h3 class="font-heading font-bold text-lg mb-2 text-white !important" style="color: white !important;">4. Delivery</h3></div>
            </div>
        </div>
    </section>';

    $html .= '</div>'; // End #aw-home-wrap

    // Init Script
    $html .= '<script>
        document.addEventListener("DOMContentLoaded", function () {
            if(typeof Swiper !== "undefined") {
                new Swiper(".myElementorHero", {
                    loop: true, effect: "fade", fadeEffect: { crossFade: true },
                    autoplay: { delay: 4500, disableOnInteraction: false },
                    pagination: { el: ".swiper-pagination", clickable: true },
                });
            }
        });
    </script>';

    return $html;
}
// =========================================================================